<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>规格位置</title>
	<link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
	<link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
	<link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
	<link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
	<script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/webapp/js/lib/jquery.global.settings.js"></script>
	<script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
	<script type="text/javascript" src="/webapp/js/common/config.js"></script>
</head>
<body>
<div class="easyui-container-fluid">
	<div class="easyui-panel" style="border: none;">
		<div class="nav" id="nav"></div>
		<div class="easyui-panel" style="border:none;">
			<form id="ff" method="post">
				<div style="margin-bottom:20px">
					<label class="item-label">品类：</label>
					<select class="easyui-combobox" id="categorySelect" name="categoryCode" style="width:174px;" >
					</select>
				</div>
                <div style="margin-bottom:20px;margin-left: 40px"><span style="color:red">格式为：《规格名：【x】-【y】》</span></div>
                <div style="margin-bottom:20px;margin-left: 40px"><span style="color:red">注意事项：x,y必须为数字，y小于等于4</span></div>
				<div id="categorymetadatawrapper"></div>

			</form>
			<div style="margin-left: 100px;margin-bottom: 20px;">
				<a href="javascript:void(0)" class="easyui-linkbutton c8" onclick="submitForm()" style="width:80px">保存</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm()" style="width:80px">取消</a>
			</div>
		</div>

	</div>
</div>
</body>
<script type="text/javascript">
    var id=getQueryParameter("id"),categoryCode=getQueryParameter("categoryCode");
    $(function(){
        setNav();
        $.when(initCategorySelect("categorySelect"),generatemetadatawrap()).done(function(){initFormData()});

    });
    function initFormData(){
        $("#categorySelect").combobox("select",categoryCode);
        $("#categorySelect").combobox('readonly', true);

    }
    function submitForm(){
        $("#ff").form("submit",{
            onSubmit:function(){
                var valid = $(this).form('enableValidation').form('validate');
                if(valid){
                    var formData = getFormData(document.getElementById("ff"));
                    formData = transfer(formData);
                    var method = "POST";
                    if(id){
                        method = "PATCH";
                        formData.id = id;
                    }
                    var rowSort = [];

                    for(var i in formData.X){
                        if(!isNaN(i)&&formData.X[i]){
                            rowSort.push({metadataCode:formData.MetadataCode[i],coordinateX:formData.X[i],coordinateY:formData.Y[i]});
                        }
                    }
                    formData['rowSort'] = rowSort;

                    $.ajax({
                        url:config.url+"/categoryMetadata/properties/update",
                        type:method,
                        data:JSON.stringify(formData),
                        dataType:'json',
                        contentType:'application/json;charset=UTF-8',
                        xhrFields:{withCredentials:true},
                        beforeSend:function(){
                            $.messager.progress({
                                title:"请稍等",
                                interval:50,
                                text:"操作进行中..."
                            });
                        },
                        complete:function(){
                            $.messager.progress("close");
                        },
                        success:function(data){
                            // console.log(data.code);
                            if(data.code=="200"){
                                $.messager.alert("提示",data.msg,"info",function(){
                                    window.parent.closeCurrentTab(true);
                                });
                            }else{
                                $.messager.alert("提示",data.msg,"error");
                            }
                        },
                        error:function(XMLHttpRequest,textStatus,thrown){
                            $.messager.alert("提示","操作失败","error");
                        }
                    });
                    return false;
                }
                return false;
            }
        });
    }
    function generatemetadatawrap() {//au为布尔类型，当为true时表示添加数据
        $.ajax({
            url:config.url+"/categoryMetadata/getMetadataAll?categoryCode="+categoryCode,
            type:'get',
            xhrFields:{withCredentials:true},
            success:function (data) {
                //规格数据填充
                var content = getContent(data,1);
                $("#categorymetadatawrapper").html(content);
                $.parser.parse($("#categorymetadatawrapper"));

            }
        });
    }


    function getContent(data,add) {
        var content = ["<div class='box'>"];
        for (var i = 0; i < data.length; i++) {
            if (i != 0 && i % 8 == 0) {
                content.push("</div><div class='box' style='margin: 10px 0' >");
            }
            content.push(render1(data[i],add));
        }
        content.push('</div>');
        return content.join("");
    }
    function render1(metadata) {
        var res = "";
        var requ = metadata.require == true ? " class='item-required' " : " style='display: none' ";
        res += "<label class='item-label'><span " + requ + ">*</span>" + metadata.name + "：</label>";
        dynamic="<input name='MetadataCode'value='"+metadata.code+"' type='hidden'/>"
        if(metadata.coordinateX==null){
            dynamic1="<input name='X' type='text' class='easyui-textbox' style='width:58px'/>"
        }else{
            dynamic1="<input name='X' type='text' value='"+metadata.coordinateX+"' class='easyui-textbox' style='width:58px'/>";
        }
        if(metadata.coordinateY==null){
            dynamic2="<input name='Y' type='text' class='easyui-textbox' style='width:58px'/>"
        }else{
            dynamic2="<input name='Y' type='text' value='"+metadata.coordinateY+"' class='easyui-textbox' style='width:58px'/>";
        }
        res = res+dynamic+dynamic1+"--"+dynamic2;
        return res;
    }
    function cancelForm(){
        window.parent.closeCurrentTab();
    }

</script>
</html>